<template>
	<view>
		<view class='cuIcon-cu-image'>
			<image style="width: 100%;height: 500rpx;" src="/static/BasicsBg.png"></image>
		</view>
		<view class="v-form-class">
			<form :model="model">
				<view class="cu-form-group">
					<view class="title">用户账号</view>
					<input placeholder="用户账号" v-model="model.username" name="input"></input>
				</view>
				<view class="cu-form-group">
					<view class="title">登录密码</view>
					<input placeholder="登录密码" type="password" v-model="model.password" name="input"></input>
				</view>
				<view class="cu-form-group">
					<view class="title">确认密码</view>
					<input placeholder="确认密码" type="password" @blur="validateToNextPassword"
						v-model="model.confirmpassword" name="input"></input>
				</view>
				<view class="cu-form-group">
					<view class="title">用户姓名</view>
					<input placeholder="用户姓名" v-model="model.realname" name="input"></input>
				</view>
				<view class="cu-form-group">
					<view class="title">手机号码</view>
					<input type="number" placeholder="手机号码" @blur="validatePhone" v-model="model.phone"
						name="input"></input>
					<view class="cu-capsule radius">
						<view class='cu-tag bg-blue '>
							+86
						</view>
						<view class="cu-tag line-blue">
							中国大陆
						</view>
					</view>
				</view>
				<view class="cu-form-group">
					<view class="title">验证码</view>
					<input v-model="model.captcha" size="large" type="text" placeholder="验证码">
					<icon slot="prefix" type="mail" :style="{ color: 'rgba(0,0,0,.25)' }" />
					</input>
					<button class="cu-btn bg-blue lg round " size="large" :disabled="state.smsSendBtn"
						@click.stop.prevent="getCaptcha"
						v-text="!state.smsSendBtn && '获取验证码'||(state.time+' s')"></button>
				</view>
				<view class="padding text-center margin-top">
					<button class="cu-btn bg-blue lg margin-right shadow" :loading="loading"
						:class="[shape=='round'?'round':'']" @tap="handelRegister"><text
							space="emsp">{{loading ? "注册中...":" 注册 "}}</text>
					</button>
					<button class="cu-btn line-blue lg margin-left shadow" :class="[shape=='round'?'round':'']"
						@tap="handelCancel"><text space="emsp">{{" 登录 "}}</text></button>
				</view>
			</form>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading: false,
				shape: 'round', //round 圆形
				model: {},
				url: {
					addUser: '/sys/user/register',
					duplicateCheck: '/sys/duplicate/check'
				},
				userId: '',
				state: {
					time: 60,
					smsSendBtn: false,
					passwordLevel: 0,
					passwordLevelChecked: false,
					percent: 10,
					progressColor: '#FF0000'
				},
			}
		},
		methods: {
			handelRegister() {
				if (!this.model.username) {
					this.$tip.alert("请输入正确用户账号!");
					return;
				} else if (!this.model.password) {
					this.$tip.alert("请输入登录密码!");
					return;
				} else if (!this.model.confirmpassword) {
					this.$tip.alert("请输入确认密码!");
					return;
				} else if (!this.model.realname) {
					this.$tip.alert("请输入正确用户姓名!");
					return;
				} else if (!this.model.phone) {
					this.$tip.alert("请输入正确格式的手机号码!");
					return;
				} else if (!this.model.captcha) {
					this.$tip.alert("请输入正确验证码!");
					return;
				}
				if (this.model.password !== this.model.confirmpassword) {
					this.$tip.alert('两次输入的密码不一样！');
					return;
				}
				this.$http.post(this.url.addUser, this.model).then(res => {
					if (res.data.success) {
						this.$tip.success(res.data.message);
					} else {
						this.$tip.alert(res.data.message);
					}
				}).catch(error => {
					this.$tip.alert(error.data.message);
				})
			},
			handelCancel() {
				this.$Router.push({
					name: 'login'
				});
			},
			validatePhone(e) {
				let value = e.target.value;
				if (!value) {
					this.$tip.alert("请输入手机号码!");
					return false;
				} else {
					if (new RegExp(/^1[3|4|5|7|8|9][0-9]\d{8}$/).test(value)) {} else {

						this.$tip.alert("请输入正确格式的手机号码!");
						return false;
					}
				}
			},
			validateToNextPassword(e) {
				let value = e.target.value;
				const confirmpassword = this.model.password;
				if (value && confirmpassword && value !== confirmpassword) {
					this.$tip.alert('两次输入的密码不一样！');
					return;
				}
			},
			getCaptcha(e) {
				let that = this
				if (this.model.phone) {
					e.preventDefault()
					that.state.smsSendBtn = true;
					let interval = window.setInterval(() => {
						if (that.state.time-- <= 0) {
							that.state.time = 60;
							that.state.smsSendBtn = false;
							window.clearInterval(interval);
						}
					}, 1000);
					const params = {
						mobile: that.model.phone,
						smsmode: "1"
					};
					that.$http.post("/sys/sms", params).then((res) => {
						if (!res.data.success) {
							that.$tip.alert(res.data.message);
						}else{
							that.$tip.success(res.data.message);
						}
					}).catch(err => {
						clearInterval(interval);
						that.state.time = 60;
						that.state.smsSendBtn = false;
						that.$tip.success(err.data.message);
					});
				} else {
					that.$tip.toast("请填写手机号后再获取验证码");
				}

			},
		}
	}
</script>

<style lang="scss">
	.register-button {
		width: 50%;
	}

	.v-form-class {
		margin-top: 50px;
	}
</style>
